<!--
 * @Descripttion: 数据碰撞时左右表的数据筛选
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-30 10:19:55
 * @LastEditors: 淏
 * @LastEditTime: 2024-05-01 14:31:51
-->
<template>
  <el-card class="cleatCard">
    <div slot="header" class="clearfix">
      <el-tag
        class="button"
        size="medium"
        style="font-size: 16px; margin-top: 0"
      >
        {{ title }}
      </el-tag>
      <span class="text"></span>
      <!--  <el-button
        size="mini"
        style="margin-left: 30px"
        type="success"
        class="button"
        icon="el-icon-circle-plus-outline"
        plain
        @click="saveData()"
      >
        保存数据
      </el-button> -->
    </div>
    <el-form>
      <el-row>
        <el-col :span="24">
          <el-form-item label-width="120px">
            <span slot="label">
              <span class="text">选择类型</span>
            </span>
            <el-select
              size="mini"
              v-model="importType"
              placeholder="请选择"
              class="inputSelect"
              :popper-append-to-body="false"
              @change="typeChange"
            >
              <el-option label="数据集" value="import"></el-option>
              <el-option label="碰撞结果" value="collision"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="120px">
            <span slot="label">
              <span class="text">选择数据集</span>
            </span>
            <selectImport
              ref="selectImport"
              :type="importType"
              @getImport="getImport"
            ></selectImport>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="120px">
            <span slot="label">
              <span class="text">选择保留列</span>
            </span>
            <el-select
              v-model="table.tableColumns"
              multiple
              collapse-tags
              placeholder="请选择"
              style="width: 10vw"
              :popper-append-to-body="false"
            >
              <el-checkbox
                v-model="check"
                class="m-l-20"
                :indeterminate="table.tableColumns.length !== tableClo.length"
                @change="selectAll"
              >
                <span class="text">全选</span>
              </el-checkbox>
              <el-option
                v-for="(item, index) in tableClo"
                :key="index"
                :label="item.columnCnName"
                :value="item.columnEnName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-tag
        class="button"
        size="medium"
        style="font-size: 16px; margin-top: 0"
      >
        数据筛选规则
      </el-tag>
      <span class="text"></span>
      <el-row>
        <el-col>
          <div
            v-for="(tableItem, tableIndex) in tableQueryRules"
            :key="tableIndex"
          >
            <el-row>
              <!-- 选择列 -->
              <div style="margin-top: 10px">
                <el-form-item label-width="120px">
                  <span slot="label">
                    <span class="text">列名</span>
                  </span>
                  <el-select
                    size="mini"
                    v-model="tableItem.columnEnName"
                    placeholder="选择列"
                    class="handle-select mr10"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="(item, index) in tableClo"
                      :key="index"
                      :label="item.columnCnName"
                      :value="item.columnEnName"
                    ></el-option>
                  </el-select>
                  <el-tooltip class="item" content="添加列" placement="top-end">
                    <el-button
                      size="mini"
                      class="button"
                      style="margin-left: 20px"
                      type="success"
                      icon="el-icon-circle-plus-outline"
                      circle
                      plain
                      @click="addColumn(tableItem)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                    class="button"
                    content="删除该列"
                    placement="top-start"
                  >
                    <el-button
                      size="mini"
                      style="margin-left: 20px"
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      plain
                      @click="removeColumn(tableItem)"
                    ></el-button>
                  </el-tooltip>
                </el-form-item>
              </div>
              <div
                v-for="(rulesItem, rulesIndex) in tableItem.rule"
                :key="rulesItem.keys"
              >
                <el-row>
                  <!--                   <el-col :span="0.2">
                    <el-tooltip
                      class="button"
                      content="删除该条件"
                      placement="left-start"
                    >
                      <el-button
                        size="mini"
                        style="margin-left: 10px"
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        plain
                        @click="removeRules(rulesItem, tableIndex)"
                      ></el-button>
                    </el-tooltip>
                  </el-col> -->
                  <el-col :span="23.8">
                    <selectAllRule
                      ref="selectAllRule"
                      @getAllRule="getAllRule($event, tableIndex, rulesIndex)"
                      :type="ruleType"
                      :columns="tableClo"
                      @getValue1="getValue1($event, tableIndex, rulesIndex)"
                      @getValue2="getValue2($event, tableIndex, rulesIndex)"
                      @removeRules="removeRules(tableIndex, rulesItem)"
                    ></selectAllRule>
                  </el-col>
                </el-row>
              </div>
              <el-col :span="24">
                <el-tooltip
                  class="button"
                  content="添加查询条件"
                  placement="left-start"
                >
                  <el-button
                    size="mini"
                    style="margin-left: 10px"
                    type="success"
                    icon="el-icon-circle-plus-outline"
                    plain
                    @click="addRules(tableIndex)"
                  >
                    添加条件
                  </el-button>
                </el-tooltip>
              </el-col>
            </el-row>
            <el-divider></el-divider>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
  import selectImport from '@/components/public/selectImport.vue'
  import selectAllRule from './selectAllRule.vue'
  import { query_tableColumn } from '@/api/index.js'
  export default {
    // 组件名称
    name: 'searchImData',
    // 组件参数 接收来自父组件的数据
    props: {
      title: {
        type: String,
        require: true,
      },
    },
    // 局部注册的组件
    components: { selectImport, selectAllRule },
    // 组件状态值
    data() {
      return {
        importType: 'import',
        ruleType: 'query',
        tableClo: [],
        table: {
          importId: '',
          tableColumns: [],
        },
        tableQueryRules: [
          {
            columnEnName: '',
            rule: [
              {
                ruleName: '',
                value1: '',
                isV1Filed: '',
                value2: '',
                isV2Filed: '',
                valueCount: '',
                keys: new Date().getTime(),
              },
            ],
          },
        ],
      }
    },
    // 计算属性
    computed: {
      check: {
        get() {
          if (this.table.tableColumns.length === this.tableClo.length) {
            return true
          }
          return false
        },
        set() {},
      },
    },
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      /* 数据集类型改变 */
      typeChange() {
        this.$refs['selectImport'].getData(this.importType)
      },
      /* 表查询数据集 */
      getImport(row) {
        if (row != undefined) {
          this.table.importId = row.id
          this.searchColumn()
        }
      },
      /* 表查询数据集下的字段 */
      searchColumn() {
        let importId = this.table.importId
        let params = new URLSearchParams()
        params.append('importId', importId)
        query_tableColumn(params).then((res) => {
          this.table.tableColumns = []
          this.tableClo = res.data
          if (this.tableClo.length > 0) {
            this.tableClo.map((item) => {
              this.table.tableColumns.push(item.columnEnName)
            })
          } else {
            this.table.tableColumns = []
          }
          this.saveData()
        })
      },
      /* 表数据筛选规则 */
      getAllRule(row, tableItem, rulesIndex) {
        this.tableQueryRules[tableItem].rule[rulesIndex].ruleName = row.name
        this.tableQueryRules[tableItem].rule[rulesIndex].valueCount =
          row.valueCount
      },
      getValue1(row, tableItem, rulesIndex) {
        this.tableQueryRules[tableItem].rule[rulesIndex].value1 = row.value1
        this.tableQueryRules[tableItem].rule[rulesIndex].isV1Filed =
          row.isV1Filed
      },
      getValue2(row, tableItem, rulesIndex) {
        this.tableQueryRules[tableItem].rule[rulesIndex].value2 = row.value2
        this.tableQueryRules[tableItem].rule[rulesIndex].isV2Filed =
          row.isV2Filed
      },
      //新增列
      addColumn() {
        this.tableQueryRules.push({
          columnEnName: '',
          rule: [
            {
              ruleName: '',
              value1: '',
              isV1Filed: '',
              value2: '',
              isV2Filed: '',
              valueCount: '',
              keys: new Date().getTime(),
            },
          ],
        })
      },
      //删除列
      removeColumn(item) {
        var index = this.tableQueryRules.indexOf(item)
        if (this.tableQueryRules.length != 1) {
          if (index !== -1) {
            this.tableQueryRules.splice(index, 1)
          }
        }
      },
      //新增条件
      addRules(tableItem) {
        this.tableQueryRules[tableItem].rule.push({
          ruleName: '',
          value1: '',
          isV1Filed: '',
          value2: '',
          isV2Filed: '',
          valueCount: '',
          keys: new Date().getTime(),
        })
      },
      //删除条件
      removeRules(tableItem, rulesItem) {
        var index = this.tableQueryRules[tableItem].rule.indexOf(rulesItem)
        if (this.tableQueryRules[tableItem].rule.length != 1) {
          if (index !== -1) {
            this.tableQueryRules[tableItem].rule.splice(index, 1)
          }
        }
      },
      selectAll(checked) {
        if (checked) {
          this.table.tableColumns = this.tableClo.map((d) => d.columnEnName)
        } else {
          this.table.tableColumns = []
        }
      },
      saveData() {
        this.$emit(
          'getColData',
          this.table,
          this.tableClo,
          this.tableQueryRules
        )
      },
      clearData() {
        this.tableClo = []
        this.table = {
          importId: '',
          tableColumns: [],
        }
        this.tableQueryRules = [
          {
            columnEnName: '',
            rule: [
              {
                ruleName: '',
                value1: '',
                isV1Filed: '',
                value2: '',
                isV2Filed: '',
                valueCount: '',
                keys: new Date().getTime(),
              },
            ],
          },
        ]
      },
    },
    created() {},
    mounted() {},
  }
</script>

<style scoped>
  .button {
    background: rgba(0, 0, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #295a85;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  .text {
    color: #00ffff;
    font-weight: 500;
  }
  .cleatCard {
    background: rgba(48, 89, 224, 0.3);
    border: 1px solid #295a85;
    overflow: auto; /* 自动开启滚动条 */
    height: calc(100vh - 280px); /* 设置最大高度 */
  }
</style>
<style lang="less" scoped>
  /deep/ .el-divider--horizontal {
    margin: 6px;
    margin-top: 40px;
    background: #00ffff82;
  }
</style>
<style lang="less" scoped>
  /deep/ .el-divider--horizontal {
    margin: 6px;
    margin-top: 5px;
    background: #00ffff;
  }
</style>
